<template>
  <div>
    <div class="quTitle p-y-10 flex justify-between items-center" :class="{'no-touch': isExam}">
      <div style="width: 70%;">
        <el-tag
          effect="plain"
          size="small"
        >{{currentQu.objTag ? currentQu.objTag : currentQu.subTag}}</el-tag>
        {{ curIdx+'. ' }}{{ currentQu.objContent ? currentQu.objContent : currentQu.subContent}}
      </div>
      <div class="flex items-center">
        <div class="flex items-center">
          <span>难度：</span>
          <el-rate v-model="grand" disabled />
        </div>
        <Enclosure :currentQu="currentQu" />
      </div>
    </div>

    <el-radio-group
      @change="$_radioChangeHandler"
      v-model="answer[curIdx-1].quAnswer"
      v-if="currentQu.objType == 1"
    >
      <el-radio label="1">A：{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">B：{{ currentQu.objTwo }}</el-radio>
      <el-radio label="3">C：{{ currentQu.objThree }}</el-radio>
      <el-radio label="4">D：{{ currentQu.objFour }}</el-radio>
    </el-radio-group>

    <el-radio-group
      @change="$_radioChangeHandler"
      v-model="answer[curIdx-1].quAnswer"
      v-if="currentQu.objType == 2"
    >
      <el-radio label="1">{{ currentQu.objOne }}</el-radio>
      <el-radio label="2">{{ currentQu.objTwo }}</el-radio>
    </el-radio-group>

    <el-checkbox-group
      @change="$_radioChangeHandler();answer[curIdx-1].quAnswer=answer[curIdx-1].uanswers.join('$');"
      v-model="answer[curIdx-1].uanswers"
      v-if="currentQu.objType == 3"
    >
      <el-checkbox label="1">A：{{ currentQu.objOne }}</el-checkbox>
      <el-checkbox label="2">B：{{ currentQu.objTwo }}</el-checkbox>
      <el-checkbox label="3">C：{{ currentQu.objThree }}</el-checkbox>
      <el-checkbox label="4">D：{{ currentQu.objFour }}</el-checkbox>
    </el-checkbox-group>

    <div v-if="currentQu.subType == 4" class="flex items-center">
      <span>答:</span>
      <el-input
        class="border-bottom"
        @change="inputChange"
        auto-complete="off"
        placeholder="请输入"
        v-model="answer[curIdx-1].quAnswer"
        clearable
      />
    </div>

  </div>
</template>
  
  <script>
import { debounce } from "@/utils";
import Enclosure from "@/views/Question/comp/enclosure.vue";

export default {
  name: "QuShow",
  props: {
    subject: {
      type: Object,
      default: () => ({})
    },
    currentQu: {
      type: Object,
      default: () => ({})
    },
    answer: {
      type: Array,
      default: () => []
    },
    curIdx: Number,
  },
  components: { Enclosure },
  data() {
    return {
      $_radioChangeHandler: null
    };
  },
  computed: {
    grand: {
      get() {
        return this.currentQu.objGrand
          ? this.currentQu.objGrand
          : this.currentQu.subGrand;
      }
    }
  },
  created() {
    this.$_radioChangeHandler = debounce(
      () => {
        if (this.isMultUse) {
          this.subject[this.currentQu.objType].subs.find(
            x => x.order == this.curIdx
          ).completed = true;
        }
        this.answer[this.curIdx - 1].completed = true;
        this.$emit("change", this.answer[this.curIdx - 1]);
      },
      500,
      false
    );
  },
  methods: {
    change() {},
    inputChange(v) {
      if (this.isMultUse)
        this.subject[this.currentQu.subType].subs.find(
          x => x.order == this.curIdx
        ).completed = v != "";
      this.answer[this.curIdx - 1].completed = v != "";
      this.$emit("change", this.answer[this.curIdx - 1]);
    }
  }
};
</script>
  <style scoped>
.el-radio-group,
.el-checkbox-group {
  display: flex;
  flex-direction: column;
}
.el-radio,
.el-checkbox {
  margin-top: 20px;
}
.el-input {
  width: 30%;
}
.el-input :deep(.el-input__inner) {
  border: none;
}
:deep(.el-rate) {
  height: auto;
  line-height: 0;
}
</style>